<template>
	<view class="content">
		<ProductSearch @search="search"></ProductSearch>
		<view v-show="filterShow">
			<view class="list">
				<view class="datatitle" @click="typeDetail('', '全部')">
					<span>全部</span>
				</view>
			</view>
			<view class="list" v-for="dict in getStrDictOptions(DICT_TYPE.HKB_GOODS_TYPE)" :key="dict.value + ''">
				<view class="datatitle" @click="typeDetail(dict.value, dict.label)">
					<span>{{ dict.label }}</span>
				</view>
			</view>
		</view>
		<view v-show="!filterShow">
			<view class="list" v-for="(item, i) in productList" :key="i">
				<view class="datatitle" @click="productDetil(item.id)">
					<span>{{ item.number }}</span>
				</view>
			</view>
		</view>
		<el-button class="fixedBtn" type="primary" round @click="addBtn">+ {{ $t(`global.record`) }}</el-button>
	</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Navigate } from '@/utils';
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import ProductSearch from '../components/productSearch.vue'
import * as productApi from '@/service/api/hkb/product'
import i18n from '@/main'
import Storage from "@/modal/useStorage";
onReady(() => {
  uni.setNavigationBarTitle({
    title: i18n.global.locale === 'zh' ? '商品管理' : 'PRODUCT'
  });
})
const filterShow = ref(true)
const productList = ref()
const typeDetail = (type: string | number | boolean, typeName: string) => {
	Navigate.to(`/pages/hkb/product/list?type=${type}&typeName=${typeName}`)
}
const productDetil = (id: string | number) => {
	Navigate.to('/pages/hkb/product/list?id=' + id)
}
const search = async (val?: string) => {
	if (val) {
		filterShow.value = false
		const res = await productApi.getListAll({ number: val })
		productList.value = res
	} else {
		filterShow.value = true
	}
}
const addBtn = () => {
	Storage.set('productDetail', {product: null, isAdd: true, isEdit: false})
	Navigate.to(`/pages/hkb/product/detail`)
}

</script>
<style lang="scss" scoped>
.list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 80rpx;
	border-bottom: 1rpx solid #DCDFE6;
	cursor: pointer;
	background-color: #ffffff;
	font-size: 26rpx;

	&:first-child {
		border-top: 1rpx solid #DCDFE6;
	}
}

.datatitle {
	display: flex;
	justify-content: space-between;
	padding-left: 50rpx;
	padding-right: 50rpx;
}
</style>
